<template>
	<view>
		<es-button class="margin-top" icon="add">添加按钮</es-button>
		<es-button class="margin-top" shadow>按钮带阴影</es-button>
		<es-button class="margin-top" :block="false">非块状按钮</es-button>
		<es-button class="margin-top" radius>圆角按钮</es-button>
		<es-button class="margin-top" round>圆形按钮</es-button>
		<es-button class="margin-top" isLine>镂空按钮</es-button>
		
		<view class="text-center margin-top">按钮大小</view>
		<es-button class="margin-top" size="lg">大按钮</es-button>
		<es-button class="margin-top">默认按钮</es-button>
		<es-button class="margin-top" size="sm">小按钮</es-button>
		<es-button class="margin-top" customColor="red">自定义颜色按钮</es-button>
		
		<es-button class="margin-top" @click="changeStatus">异步更改按钮状态</es-button>
		<es-button class="margin-top" @click="changeStatus" loadingDisabledText="请求中...">异步更改按钮状态禁用文字修改</es-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			changeStatus(e, setLoading) {
				// 发送请求时
				setLoading(true)
				setTimeout(() => {
					// 请求完成
					setLoading(false)
				}, 2000)
			}
		}
	}
</script>

<style>

</style>
